<template>
  <div>
    <a-space :size="size" style="margin-bottom: 10px;">
      <a-input-search
          v-model:value="searchValue"
          placeholder="请输入..."
          enter-button
          @search="onSearch(searchValue)"
      />
      <a-button @click="showAppend">
        <PlusOutlined/>
        新增
      </a-button>
      <a-popconfirm title="确认删除吗？" @confirm="onDelete" ok-text="确认" cancel-text="取消">
        <template #icon>
          <question-circle-outlined style="color: red"/>
        </template>
        <a-button>
          <DeleteOutlined/>
          删除
        </a-button>
      </a-popconfirm>
      <a-button @click="showImport">
        <DownloadOutlined/>
        导入
      </a-button>
      <a-button @click="onExport">
        <ShareAltOutlined/>
        导出
      </a-button>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {
  DownloadOutlined,
  QuestionCircleOutlined,
  PlusOutlined,
  DeleteOutlined,
  ShareAltOutlined
} from '@ant-design/icons-vue';
import {defineProps, defineEmits} from "vue";

const size = ref(15);
const searchValue = ref<string>('');

interface Props {
  showAppend?: Function;
  showImport?: Function;
  onSearch?: Function;
  onDelete?: Function;
  onExport?: Function;
}

defineProps<Props>();

interface Emits {

}

defineEmits<Emits>();
</script>

<style scoped></style>
